<template>
  <div class="record">
    <div class="search-box">
      <el-form :inline="true" :model="formInline">
        <el-form-item label="咨询师姓名">
          <el-input
            v-model="searchOption.cname"
            clearable
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="访客姓名">
          <el-input
            v-model="searchOption.vname"
            clearable
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker
            v-model="startTime"
            type="date"
            placeholder="请选择开始时间"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="setSearchOption">搜索</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="
        currentData.slice(
          (query.page - 1) * query.limit,
          query.limit * query.page
        )
      "
      stripe
      style="width: 100%"
      border="1px"
      max-height="530"
      v-loading="!showData"
    >
      <el-table-column prop="visitorName" label="访客姓名" width="180" />
      <el-table-column prop="counsellorName" label="咨询师姓名" width="180" />
      <el-table-column prop="duration" label="咨询时长" width="180" />
      <el-table-column prop="startTime" label="咨询日期" />
      <el-table-column prop="rating" label="咨询评级">
        <template v-slot="scope">
          <el-rate disabled v-model="scope.row.rating" />
        </template>
      </el-table-column>
      <el-table-column prop="evaluation" label="咨询评价" />
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button
            type="text"
            size="small"
            @click="
              getDetails(scope.row.conversationID);
              showDialog = true;
            "
            >查看详情</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="exportSingle(scope.row.conversationID)"
            >导出记录</el-button
          >
        </template>
        <template v-slot:empty>
          <p :class="{ 'el-table-empty-p': tableText }">{{ tableText }}</p>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="showDialog">
      <div v-loading="!showTable">
        <el-form v-if="showTable">
          <el-form-item v-for="item in chatData" :key="item">
            <img :src="item.avatar" style="width: 40px; height: 40px" />
            <div style="text-align: left">
              <span :style="selectColor(item.name)">{{ item.name }}</span>
              <div class="pop" v-if="item.flag == 0">
                <div class="arrow"></div>
                {{ item.message }}
              </div>
              <div
                class="pop"
                v-else-if="item.flag == 1"
                style="background-color: #90939994"
              >
                <div
                  class="arrow"
                  style="border-color: #fff #90939994 #fff #fff"
                ></div>
                {{ item.message }}
              </div>
              <div
                class="pop"
                v-else-if="item.flag == 2"
                style="background-color: #29c702d1"
              >
                <div
                  class="arrow"
                  style="border-color: #fff #29c702d1 #fff #fff"
                ></div>
                {{ item.message }}
              </div>
            </div>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="showDialog = false">确认</el-button>
        <el-button @click="showDialog = false">取消</el-button>
      </div>
    </el-dialog>
    <v-pagination
      class="pagination"
      align="center"
      :pagesize="query.limit"
      :total="pageTotal"
      :options="query"
    >
    </v-pagination>
  </div>
</template>

<script lang="ts">
import { ref, reactive } from "vue";
import vPagination from "../../../utils/pagination.vue";
import { getRecord, getDetail, getExportSingle } from "@/service/api";
import { recordSearch, recordData } from "@/interface/type";
export default {
  name: "recordPage",
  components: {
    vPagination,
  },
  setup() {
    let showDialog = ref(false);
    let chatData = reactive<any>([{}]);
    let currentData = reactive([{}]);
    let showData = ref(false);
    let showTable = ref(false);
    const searchOption = ref<recordSearch>({});
    let startTime = ref<Date>();
    const tableText = ref("暂无记录");
    let pageTotal = ref(0), //总条数
      query = reactive({
        //配置对应的查询参数
        appTimeStart: "",
        appTimeEnd: "",
        page: searchOption.value.page,
        limit: searchOption.value.size, //page第几页,limit是一页几个
      });
    // 获取并处理表格数据
    const dealRecord = (res: any[]) => {
      showData.value = false;
      let count = 0;
      console.log("pageTotal", pageTotal.value);
      res = Array.from(res);
      currentData.length = 0;
      res.forEach((item: any) => {
        count++;
        let temp: recordData = {};
        temp.conversationID = item.conversationID;
        temp.counsellorName = item.counsellorInfo.name;
        temp.visitorName = item.visitorInfo.name;
        temp.startTime = item.startTime;
        temp.endTime = item.endTime;
        if (
          new Date(item.startTime).getTime() > new Date(item.endTime).getTime()
        ) {
          temp.duration = "正在咨询中";
        } else {
          const seconds =
            (new Date(item.endTime).getTime() -
              new Date(item.startTime).getTime()) /
            1000;
          const hours = Math.floor(seconds / 3600);
          const minutes = Math.floor((seconds - hours * 3600) / 60);
          const second = seconds % 60;
          temp.duration = hours + ":" + minutes + ":" + second;
        }

        if (item.evaluation != null) {
          temp.rating = item.evaluation.rating;
          if (item.evaluation.evaluation) {
            temp.evaluation = item.evaluation.evaluation;
          } else {
            temp.evaluation = "暂无评价";
          }
        } else {
          temp.evaluation = "暂无评价";
        }
        currentData.push(temp);
      });
      pageTotal.value = count;
      showData.value = true;
    };
    // 设置查询参数并搜索
    const setSearchOption = () => {
      let time: any;
      if (startTime.value) {
        time = startTime.value.getTime();
      }
      time = time / 1000;
      searchOption.value.startTime = time;
      searchOption.value.size = 1000;
      getRecord(searchOption.value).then((res) => {
        dealRecord(res.data.result);
      });
      console.log("currentData", currentData);
      if (query.limit && query.page) {
        currentData.slice(query.page, query.limit * (query.page + 1));
      }
      console.log("currentData", currentData, query);

      currentData.splice(currentData.length, 1);
    };
    // 获取页面初始列表
    const getPageInfo = () => {
      getRecord({ size: 1000 }).then((res) => {
        dealRecord(res.data.result);
        currentData.splice(currentData.length, 1);
        console.log("currentData", currentData);
      });
    };
    //查看详情不同用户显示不同颜色

    const selectColor = (item: any) => {
      const nameList: any[] = [];
      chatData.forEach((val: any) => {
        if (nameList.findIndex((e) => e == val.name) == -1)
          nameList.push(val.name);
      });
      let second: any;
      const curIndex = chatData.findIndex((val: any) => val.name == item);
      if (item == nameList[0]) {
        return {
          paddingLeft: "33px",
          color: "#2d90af",
        };
      } else if (item == nameList[1]) {
        return {
          paddingLeft: "33px",
          color: "#86878b",
        };
      } else if (nameList[2] && item == nameList[2]) {
        return {
          paddingLeft: "33px",
          color: "#32861d",
        };
      }
    };
    // 重置查询参数
    const reset = () => {
      searchOption.value = {
        cname: "",
        vname: "",
        startTime: undefined,
        endTime: undefined,
      };
      startTime.value = undefined;
    };

    // 查看详情
    const getDetails = async (item: string) => {
      showTable.value = false;
      await getDetail(item).then((res) => {
        const result = res.data.result;
        chatData.length = 0;
        let flag = -1;
        result.forEach((val: any) => {
          const name = val.From_Account;
          let avatar = "";
          if (val.Avatar) {
            avatar = val.Avatar;
          } else {
            const temp = "default.jpg";
            avatar = require("@/assets/" + temp);
          }

          let message = "";
          val.MsgBody.forEach((mes: any) => {
            if (mes.MsgType == "TIMImageElem") {
              message = message + "[图片]" + "\n";
            } else if (mes.MsgType == "TIMSoundElem") {
              message = message + "[语音]" + "\n";
            } else if (mes.MsgType == "TIMCustomElem") {
              message = message + "[评价]" + "\n";
            } else {
              message = message + mes.MsgContent.Text + "\n";
            }
          });
          const num = chatData.findIndex((val: any) => val.name == name);
          console.log("chatData", chatData);
          let currentFlage = 0;
          if (num != -1) {
            currentFlage = chatData[num].flag;
          } else {
            flag += 1;
            currentFlage = flag;
          }

          chatData.push({
            avatar: avatar,
            name: name,
            message: message,
            flag: currentFlage,
          });
        });
        showTable.value = true;
      });
    };
    // 导出单条
    const exportSingle = (item: string) => {
      getExportSingle(item);
    };
    getPageInfo();
    return {
      startTime,
      showDialog,
      searchOption,
      showData,
      showTable,
      exportSingle,
      chatData,
      getDetails,
      dealRecord,
      selectColor,
      getPageInfo,
      setSearchOption,
      reset,
      tableText,
      query,
      currentData,
      pageTotal,
    };
  },
};
</script>

<style lang="less" scoped>
.record {
  position: relative;
  width: 100%;
  height: 100%;
  .search-box {
    width: 100%;
    // text-align: center;
    position: relative;
    top: 10px;
  }
  /*气泡*/
  .pop {
    position: relative;
    width: auto;
    height: auto;
    min-height: 35px;
    min-width: 30px;
    padding: 2px 15px;
    line-height: 33px;
    background: #fff;
    left: 25px;
    color: #fff;
    border-radius: 5px;
    background-color: #06b5eec2;
    /* border: 1.5px solid #4d4948; */
    text-align: center;
    margin-right: 30px;
  }
  /*尖角在左侧*/
  .pop .arrow {
    position: absolute;
    top: 5px;
    left: -16px;
    width: 0;
    height: 0;
    font-size: 0;
    border: solid 8px;
    border-color: #fff #06b5eec2 #fff #fff;
  }
  // .pagination {
  //   margin-top: 10px;
  // }
}
::v-deep .el-pagination {
  justify-content: center;
}
</style>

